<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="Model.ConnectDatabase"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<style type="text/css">
    .forF{
        font: oblique;
        font-size: 50px;
        font-style: italic;
        color:violet
    }
</style>

<style type="text/css">
        label.error{color:#FF0000;font-size: 15px;}
        input.error{color:#0000FF; }
    </style>
<script type="text/javascript" src="md5.js"></script>


<script type="text/javascript">
    
    function checkDangKy(){

        arr = new Array();
        var idname = document.getElementById('idname').value;
        var subname = document.getElementById('subname');

        //Check Name
        if(idname==''){
            subname.innerHTML=' Bạn Chưa Nhập Họ Tên ! ';
            arr[0] = 'false';
        }else{
            if(checkName(idname)==false){
                subname.innerHTML='Họ tên đã nhập không hợp lệ';
                arr[13] = 'false';
            }else{
                subname.innerHTML='';
            }
        }


        //Check address
        var idaddress = document.getElementById('idaddress').value;
        var subaddress = document.getElementById('subaddress');
        if(idaddress==''){
            subaddress.innerHTML=' Bạn Chưa Nhập Địa Chỉ ! ';
            arr[1] = 'false';
        }else{
            subaddress.innerHTML='';
        }

        var idprovince = document.getElementById('idprovince').value;
        var subprovince = document.getElementById('subprovince');
        if(idprovince==''){
            subprovince.innerHTML=' Bạn Chưa Nhập Tỉnh ! ';
            arr[14] = 'false';
        }else{
            subprovince.innerHTML='';
        }


        //Check Phone
        var idphone = document.getElementById('idphone').value;
        var subphone = document.getElementById('subphone');
        if(idphone==''){
            subphone.innerHTML=' Bạn Chưa Nhập Số Điện Thoại ! ';
            arr[2] = 'false';
        }else{
            if(isPhoneNumber(idphone)==false){
                subphone.innerHTML='Số điện thoại đã nhập không hợp lệ !';
                arr[3] = 'false';
            }else{
                subphone.innerHTML='';
            }
        }



        //Check Email
        var idemail = document.getElementById('idemail').value;
        var subemail = document.getElementById('subemail');
        if(idemail==''){
            subemail.innerHTML=' Bạn Chưa Nhập Email ! ';
            arr[4] = 'false';
        }else{
            if(isEmail(idemail)==false){
                subemail.innerHTML='Email Chưa Đúng Định Dạng';
                arr[5] = 'false';
            }else{
                subemail.innerHTML='';
            }
        }



        //Check UserName
        var idusername = document.getElementById('idusername').value;
        var subusername = document.getElementById('subusername');
        if(idusername==''){
            subusername.innerHTML=' Bạn chưa nhập tài khoản ! ';
            arr[6] = 'false';
        }else{
            if(checkUsername(idusername)==false){
                subusername.innerHTML='Tài khoản đã nhập không hợp lệ !';
                arr[7] = 'false';
            }else{
                subusername.innerHTML='';
            }
        }



        //Check password confim
        var idpassword = document.getElementById('idpassword').value;
        var subpassword = document.getElementById('subpassword');
        var idconfim = document.getElementById('idconfim').value;
        var subconfim = document.getElementById('subconfim');

        if(idpassword==''){
            subpassword.innerHTML=' Bạn Chưa Nhập Password ! ';
            arr[8] = 'false';
        }
        else{
            subpassword.innerHTML='';
            if(checkPassword(idpassword)==false){
                subpassword.innerHTML='Password Chưa Đúng Định Dạng';
                arr[12]='false';
            }
            if(idpassword!=idconfim){
                subconfim.innerHTML='Hai Password Không Giống Nhau!';
                arr[9] = 'false';
            }else if(idusername==idpassword){
                subpassword.innerHTML='Tên Tài Khoản Và Mật Khẩu Không Thể Trùng Nhau';
                arr[10] = 'false';

            }else{
                subpassword.innerHTML='';
            }
        
        
            var idcaptcha = document.getElementById("idcaptcha");
            if(idcaptcha = ''){
                subcaptcha.innerHTML = "Bạn Chưa Nhập Captcha!";
            }

            if(idconfim==''){
                subconfim.innerHTML=' Bạn Chưa Nhập Lại Password ! ';
                arr[11] = 'false';
            }else{
                subconfim.innerHTML='';

            }

            for(var i=0; i<arr.length;i++){
                if(arr[i]=='false'){
                    return false;
                }
            }
        }
        function isEmail(str){
            var re =/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.([a-z]){2,4})$/;
            return re.test(str);
        }

        function isPhoneNumber(str){
            var re=/\d{3}-\d{3}-\d{4}/;
            return re.test(str);
        }
        function checkUsername (strng) {
            var illegalChars = /\W/; // allow letters, numbers, and underscores
            if (illegalChars.test(strng)) {
                return false;
            }
            return true;
        }
        function checkPassword (strng) {
            var illegalChars = /[\W_]/; // allow only letters and numbers
            if (illegalChars.test(strng)) {
                return false;
            }

            return true;
        }

        function checkName (strng) {
            var illegalChars = /\Ws/; // allow letters, numbers
            if (illegalChars.test(strng)) {
                return false;
            }
            return true;
        }
        function convertToMD5(){
            var plaintext = document.getElementById('idpassword').value;
            var md5 = hex_md5(plaintext);
            alert(md5);
            document.getElementById('hash').value = md5;
        
        }
        
        function vidu(st){
            alert(hex_md5(st));
        }
  

</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" />
<link rel="stylesheet" href="slide/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="slide/style.css" type="text/css"/>
<script type="text/javascript" src="slide/scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="slide/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="menu/stmenu.js"></script>
<script src="slide/scripts/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
        $(window).load(
        function() {
            $('#slider').nivoSlider();
        }
    )
</script>

<script type="text/javascript">
        $(document).ready(function(){
            $("#dkiss").validate(
            {
                rules:
                    {
                	username: {required:true, minlength:5, maxlength:30},
                	password:{required:true, minlength:3, maxlength:30},
                	confim:{required:true,equalTo:"#idpassword"},
                	name:{required:true, minlength:6, maxlength:50}, 
                	address:{required:true, minlength:6}, 
                        email: {required:true, email:true},
                        phone: {required: true, digits: true, minlength:10, maxlength:11},
                        captcha:{required:true},
                    },
                    messages:
                        {
                    	username:{required:"Bạn chưa nhập tên đăng nhập!", minlength:"Tên đăng nhập tối thiểu 5 ký tự",maxlength:"Tên đăng nhập tối đa 30 ký tự"},
                    	password:{required:"Bạn chưa nhập mật khẩu!", minlength:"Mật khẩu tối thiểu phải có 3 ký tự", maxlength:"Mật khẩu tối đa 30 ký tự"},
                    	confim:{required:"Bạn chưa nhập lại mật khẩu!",equalTo:"Hai Mật khẩu Không Giống Nhau!"},
                    	name:{required:"Bạn chưa nhập họ tên!", minlength:"Họ tên tối thiểu phải có 6 ký tự",maxlength:"Họ tên tối đa 50 ký tự"},
                    	address:{required:"Bạn chưa nhập địa chỉ!", minlength:"Địa chỉ tối thiểu phải có 2 ký tự"},
                            email: {required: "Bạn chưa nhập Email", email:"Vui lòng nhập đúng email!"},
                            captcha:{required:"Bạn chưa nhập captcha!"},
                            phone:{required:"Bạn chưa nhập số điện thoại", digits:"Vui lòng nhập kiểu số!", minlength:"Số điện thoại phải ít nhất 10 ký số", maxlength:"Số điện thoại nhiều nhất chỉ được 11 ký số"}
                        },
                        submitHandler: function(form){
                            if(confirm("Dữ liệu form đã hợp lệ. Bạn có muốn submit không?"))
                                {
                            	document.getElementById('idpassword').value = hex_md5(document.getElementById('idpassword').value);
                            	form.submit();
                                }
                        }
            });
        });
     
    </script>
    
<%
    String name = request.getParameter("name");
    if (name == null) {
        name = "";
    }
    String province = request.getParameter("province");
    if (province == null) {
        province = "";
    }

    String address = request.getParameter("address");
    if (address == null) {
        address = "";
    }

    String phone = request.getParameter("phone");
    if (phone == null) {
        phone = "";
    }


    String email = request.getParameter("email");
    if (email == null) {
        email = "";
    }


    String username = request.getParameter("username");
    if (username == null) {
        username = "";
    }


    String password = request.getParameter("password");
    if (password == null) {
        password = "";
    }




    String error_username = "", err_username;
    err_username = request.getParameter("error_username");
    if (err_username == null) {
    } else {
        if (err_username.equals("error username")) {
            error_username = "Tên Tài Khoản Này Đã Tồn Tại!";
        }
    }

    String error_email = "", err_email;
    err_email = request.getParameter("error_email");
    if (err_email == null) {
    } else {
        if (err_email.equals("error email")) {
            error_email = "Tên Email Này Đã Tồn Tại!";
        }
    }

    String username_error = (String) request.getAttribute("username_error");
    if (username_error == null) {
        username_error = "";
    }

    String password_error = (String) request.getAttribute("password_error");
    if (password_error == null) {
        password_error = "";
    }

    String name_error = (String) request.getAttribute("name_error");
    if (name_error == null) {
        name_error = "";
    }

    String address_error = (String) request.getAttribute("address_error");
    if (address_error == null) {
        address_error = "";
    }

    String phone_error = (String) request.getAttribute("phone_error");
    if (phone_error == null) {
        phone_error = "";
    }

    String email_error = (String) request.getAttribute("email_error");
    if (email_error == null) {
        email_error = "";
    }

    String captcha_error = (String) request.getAttribute("captcha_error");
    if (captcha_error == null) {
        captcha_error = "";
    }
%>

<div id="rightside">

    <%@include file="slide.jsp" %>
    <div></div>
    <div id="cart" style="margin-left:5px;margin-top:50px;">

        <div class="box_header">
            <h4 class="title_center">ĐĂNG KÝ THÔNG TIN</h4>
        </div >
        <div class="box_center">

            <form id="dkiss" name="dkiss" action="ControlRegister" method="POST" >


                <div style="font-weight: bold;padding-left: 50px;"> Thông Tin Tài Khoản </div>
                <table border="0" width="80%">
                    <tr>
                        <td height="1" width="100%" colspan="4" align="center" ><br></td>
                    </tr>
                    <tr>
                        <td height="1" width="10%" ></td>
                        <td height="1"  width="20%"  align="right" >Tài Khoản<span style="color: red">(*)</span> </td>
                        <td height="1" width="30%"><input type="text" name="username" size="30" id="idusername" value="<%=username%>"></td>
                        <td><font color="red"><sub><span id="subusername"><%=username_error%> </span><%=error_username%></sub></font></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%" > </td>
                        <td height="1"  width="30%" align="left" colspan="1" style="font-weight: 900">
                            Tài khoản chỉ có thể là số,ký tự,gạch dưới
                        <td></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1" width="30%"  align="right">Mật Khẩu<span style="color: red">(*)</span> </td>

                        <td height="1" width="30%">
                            <input type="password" name="password" size="30" id="idpassword">
                            <input type="hidden" name="hash" id="hash">
                        </td>
                    

                        <td><font color="red"><sub><span id="subpassword"><%=password_error%> </span></sub></font></td>
                    </tr>

                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%" > </td>
                        <td height="1"  width="30%" align="left" colspan="1" style="font-weight: 900">
                            Mật khẩu chỉ có thể là số , ký tự
                        </td>
                        <td></td>
                    </tr>

                    <tr>
                        <td height="1" width="20%" ></tdbr>
                        <td height="1"  width="30%"  align="right">Nhập Lại Mật Khẩu<span style="color: red">(*)</span></td>
                        <td height="1" width="30%"><input type="password" name="confim" size="30" id="idconfim"></td>
                        <td><font color="red"><sub><span id="subconfim"> </span></sub></font></td>
                    </tr>
                </table>




                <tr>
                    <td height="1" width="100%" colspan="4" align="center" ><br></td>
                </tr>


                <div style="font-weight: bold;padding-left: 50px;">Thông Tin Cá Nhân</div>
                <table border="0" width="80%">
                    <tr>
                        <td height="1" width="100%" colspan="4" align="center" ><br></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1" width="30%"  align="right">Họ Tên <span style="color: red">(*)</span></td>
                        <td height="1" width="30%"><input type="text" name="name" size="30" id="idname" value="<%=name%>"> </td>
                        <td><font color="red"><sub><span id="subname"><%=name_error%></span></sub></font></td>
                    </tr>

                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%"  align="right">Địa Chỉ <span style="color: red">(*)</span></td>
                        <td height="1" width="30%"><input type="text" name="address" size="30" id="idaddress" value="<%=address%>"></td>
                        <td><font color="red"><sub><span id="subaddress"><%=address_error%></span></sub></font></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%"  align="right">Tỉnh <span style="color: red">(*)</span></td>
                        <td><select size="1"  name="province" id="idprovince">
                                <option value=""></option>
                                <%
                                    Connection con3 = ConnectDatabase.getConnection();
                                    Statement sta3 = con3.createStatement();
                                    String sql3 = "SELECT * FROM province ";
                                    ResultSet re3 = sta3.executeQuery(sql3);
                                    while (re3.next()) {
                                %>
                                <option value="<%=re3.getInt(1)%>"><%=re3.getString(2)%></option>

                                <%}%>

                            </select> </td>
                        <td><font color="red"><sub><span id="subprovince"></span></sub></font></td>

                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%"  align="right">Điện Thoại<span style="color: red">(*)</span></td>
                        <td height="1" width="30%"><input type="text" name="phone" size="30" id="idphone" value="<%=phone%>"></td>
                        <td><font color="red"><sub><span id="subphone"><%=phone_error%></span></sub></font></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%" > </td>
                        <td height="1"  width="30%" align="left" colspan="1" style="font-weight: 900">
                            - Số điện thoại có 10 số <br>
                            - Số điện thoại có định dạng  ###-###-####</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%"  align="right">Email <span style="color: red">(*)</span></td>
                        <td height="1" width="30%"><input type="text" name="email" size="30" id="idemail" value="<%=email%>"></td>
                        <td><font color="red"><sub><span id="sub"></span><%=error_email%></sub></font></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%"  align="right">Mã Xác Nhận <span style="color: red">(*)</span></td>
                        <td height="1" width="30%"><img src="CaptchaServlet" alt="Captcha not load"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1"  width="30%"  align="right">Nhập Mã Xác Nhận <span style="color: red">(*)</span></td>
                        <td height="1" width="30%"><input type="text" name="captcha" size="30" id="idcaptcha"></td>
                        <td><font color="red"><sub><span id="subcaptcha"></span><%=captcha_error%></sub></font></td>
                    </tr>

                </table>


                <table  border="0" width="80%">

                    <tr>
                        <td height="1" width="20%" ></td>
                        <td height="1" width="27%" align="right" colspan="2">
                            <input type="submit" value="Đăng Ký" name="dangKy" id="dangKy"> </td>



                        <td></td>
                    </tr>
                </table>
                                   
            </form>

        </div>

    </div>


</div>









